<template>
	<view v-if="$slots.default" @tap="open()">
		<slot />
	</view>
	<view v-else class=" gui-flex gui-space-between gui-align-items-center" @tap="open()">
		<input type="text" class="gui-form-input gui-flex1 gui-ellipsis" v-model="val" disabled placeholder="请选择服务类型" />
		<text class="gui-form-icon gui-icons gui-text-center gui-color-gray">&#xe601;</text>
	</view>

	<gui-popup ref="popup" position="bottom">

		<view class="gui-flex gui-column gui-bg-gray" style="height: 80vh; ">
			<view v-if="showAll" @tap="click()" style="padding-top: 20rpx;padding-right: 20rpx;"
				class="gui-flex gui-justify-content-end gui-underline gui-primary-color">全部
			</view>
			<view class="gui-flex gui-flex1 gui-relative gui-bg-gray">
				<!-- 左侧分类列表 -->
				<scroll-view :scroll-y="true" :show-scrollbar="false" :scroll-with-animation="true"
					:scroll-into-view="leftTo" class="gui-cate-left gui-bg-white gui-dark-bg-level-3 gui-absolute-full">
					<view class="gui-cate-left-item gui-border-box" v-for="(item, index) in mainCate" :key="index"
						:class="[currentCateIndex == item.xt_id ? 'gui-cate-left-current' : '']"
						:id="'cate'+item.xt_id">
						<text class="gui-border-l"
							:class="['gui-cate-left-item-title','gui-block', currentCateIndex == item.xt_id ? 'gui-cate-left-current' : '']"
							:data-cateid="item.xt_id" @tap="changCate">{{item.xt_name}}</text>
					</view>
				</scroll-view>
				<!-- 右侧列表 -->
				<scroll-view :scroll-into-view="productListTo" :show-scrollbar="false" :scroll-with-animation="true"
					:scroll-y="true" class="gui-cate-right gui-absolute-full" @scroll="rscroll">
					<!-- 循环展示分类及分类对应的产品列表 -->
					<view :data-parentid="cate.xt_id" :id="'productList'+cate.xt_id" v-for="(cate, idx) in mainCate"
						:key="idx"  style="margin-top: -30rpx;">
						<!-- 循环展示产品 -->

						<view class="gui-padding gui-border-b">
							<view style="font-weight: bold;" class="gui-h6 gui-color-grey2">{{cate.xt_name}}</view>
						</view>
						<view :class="{'gui-bg-white':$store.state.base.show_base.order_list_style!=1}" class="">
							<view class="gui-grid">
								<view @click="click(cate,item)" v-if="$store.state.base.show_base.fl_gs"
									:class="item.checked?['gui-color-bule','gui-border-b']:''" class="gui-grid-item"
                                    :style="{'flex':'0 0 90.3%'}" v-for="(item, index) in cate.children" :key="index">
                                    
                                    	<gui-image v-if="$store.state.base.show_base.order_list_style!=1"
                                    		:src="item.xt_thumb" :width="56" :height="56" class="gui-ic-image"
                                    		mode="aspectFit"></gui-image>
                                    	<text v-if="$store.state.base.show_base.order_list_style!=1"
                                    		:class="item.checked?['gui-bold','gui-underline']:''"
                                    		class="gui-text-small">{{item.xt_name}}</text>
                                    
                                    	<view v-if="$store.state.base.show_base.order_list_style==1"
                                    		style="margin-top: -35rpx;width: 500rpx;padding: 20rpx 10rpx 10rpx 90rpx ;"
                                    		:class="item.checked?['gui-bold','gui-bg-black4','gui-color-white']:'gui-bg-white'"
                                    		class="gui-text-small   gui-border-radius gui-ellipsis">{{item.xt_name}}</view>
									
								</view>
								<view @click="click(cate,item)" else
									:class="item.checked?['gui-color-bule','gui-border-b']:''" class="gui-grid-item"
									:style="{'flex':'0 0 33.3%'}" v-for="(item, index) in cate.children" :key="index">
									
									<gui-image v-if="$store.state.base.show_base.order_list_style!=1"
										:src="item.xt_thumb" :width="56" :height="56" class="gui-ic-image"
										mode="aspectFit"></gui-image>
									<text v-if="$store.state.base.show_base.order_list_style!=1"
										:class="item.checked?['gui-bold','gui-underline']:''"
										class="gui-text-small">{{item.xt_name}}</text>
									
									<view v-if="$store.state.base.show_base.order_list_style==1"
										style="margin-top: -35rpx;width: 165rpx;text-align: center;padding: 10rpx 0;"
										:class="item.checked?['gui-bold','gui-bg-black4','gui-color-white']:'gui-bg-white'"
										class="gui-text-small   gui-border-radius gui-ellipsis">{{item.xt_name}}</view>
									</view>
							</view>
						</view>

					</view>
				</scroll-view>
			</view>
		</view>
	</gui-popup>

</template>

<script>
	export default {
		name: "hyb-fenlei",

		props: {
			modelValue: {
				type: Array,
				default: () => {
					return [];
				}
			},
			xtId: {
				type: Number,
				default: 0
			},
			showAll: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				// 全屏加载，当数据请求完毕时关闭
				pageLoading: true,
				// 核心区域高度
				mainHeight: 300,
				// 左侧分类定位
				leftTo: 'cate',
				// 标识切换时左侧点击触发的
				isLeftTap: false,
				// 左侧分类数据
				mainCate: [],
				// 当前分类
				currentCateIndex: 1,
				// 延迟执行防止卡顿
				scrollTimer: null,
				// 产品列表滚动定位
				productListTo: '',
				checkedCount: 0,
				val: "",
				checkedItem: null,
			};
		},
		created() {
			// this.val = this.modelValue;


			uni.gPost("fuwu/type/list", {
				xt_parentid: 0
			}).then((types) => {
				this.mainCate = types;


				if (this.xtId) {
					this.mainCate.forEach((cate) => {
						cate.children.forEach((item) => {
							if (item.xt_id == this.xtId) {
								item.checked = true;
								this.val = cate.xt_name + "-" + item.xt_name;
								setTimeout(() => {
									this.$emit('input', {
										parent: cate,
										item: item
									})
									this.$emit('change', cate, item);
									this.$emit('update:modelValue', {
										parent: cate,
										item: item
									})
								}, 500)
							}
						})
					})
				} else if (this.mainCate.length == 1 && this.mainCate[0].children.length == 1) {
					let cate = this.mainCate[0];
					let item = cate.children[0];
					this.val = cate.xt_name + "-" + item.xt_name;
					setTimeout(() => {
						this.$emit('input', {
							parent: cate,
							item: item
						})
						this.$emit('change', cate, item);
						this.$emit('update:modelValue', {
							parent: cate,
							item: item
						})
					}, 500)
				}
			})
		},
		methods: {

			open() {
				this.$refs.popup.open();
			},
			click(cate, item) {
				if (this.checkedItem) this.checkedItem.checked = false;

				if (item) {
					item.checked = true;
					this.checkedItem = item;
					this.val = cate.xt_name + "-" + item.xt_name;
				} else {
					this.val == '全部'
				}

				setTimeout(() => {
					this.$emit('input', {
						parent: cate,
						item: item
					})

					this.$emit('change', cate, item);
					this.$emit('update:modelValue', {
						parent: cate,
						item: item
					})
				})
				this.$refs.popup.close();
			},
			changCate: function(e) {
				this.isLeftTap = true;
				var cateid = e.currentTarget.dataset.cateid;
				this.currentCateIndex = cateid;
				if (cateid == 1) {
					this.productListTo = 'productList2';
					this.$nextTick(() => {
						this.productListTo = 'productList' + cateid;
					});
				} else {
					this.productListTo = 'productList' + cateid;
				}
				setTimeout(() => {
					this.isLeftTap = false;
				}, 3000)

			},
			rscroll: function(e) {
				if (this.isLeftTap) {
					return;
				}
				if (this.scrollTimer != null) {
					clearTimeout(this.scrollTimer);
				}
				this.scrollTimer = setTimeout(() => {
					this.getIndex();
				}, 100);
			},
			// 动态识别分类激活
			getIndex: function(i) {
				const query = uni.createSelectorQuery()
				query.selectAll('.gui-cate-product-list').boundingClientRect()
				query.selectViewport().scrollOffset()
				query.exec((res) => {
					var products = res[0];
					for (let i = 0; i < products.length; i++) {
						if (products[i].top >= 0) {
							this.currentCateIndex = products[i].dataset.parentid,
								this.leftTo = 'cate' + products[i].dataset.parentid;
							break;
						}
					}
				});
			},

			comfir() {
				let items = [];
				if (this.checkedCount > 0) {
					this.mainCate.forEach((cate) => {
						if (cate.checked_count > 0) {
							cate.children.forEach((item) => {
								if (item.checked) {
									items.push(item.xt_name);
								}
							})
						}
					})
				}
				console.log(items)
				this.val = items.toString();

				setTimeout(() => {
					this.$emit('input', items.toString())
					this.$emit('update:modelValue', items.toString())
				})
				this.$refs.popup.close();
			}
		}
	}
</script>

<style>
	.gui-cate-left {
		width: 200rpx;
	}

	.gui-cate-right {
		width: 520rpx;
		left: 210rpx;
	}

	.gui-cate-left-item {
		height: 100rpx;
		padding: 35rpx 0;
		font-size: 26rpx;
	}

	.gui-cate-left-item-title {
		line-height: 32rpx;
		font-size: 28rpx;
		border-left-width: 8rpx;
		text-align: center;
	}

	.gui-cate-left-current {
		border-color: #42A5F5 !important;
		background-color: #F6F7F8;
		color: #42A5F5;
		font-weight: bold;
	}

	.gui-cate-right-title {
		line-height: 80rpx;
	}

	.gui-cate-product-list {
		margin-bottom: 30rpx;
		margin-right: 25rpx;
	}

	.gui-cate-pimg {
		width: 150rpx;
	}

	.gui-cate-pbody {
		margin-left: 30rpx;
		width: 100rpx;
		flex: 1;
		padding-top: -20rpx;
	}

	.gui-cate-price {
		font-size: 32rpx;
		line-height: 60rpx;
	}

	.gui-grid-item {
		padding: 20rpx 0;
	}

	.gui-ic-image {

		margin-bottom: 10rpx;
	}

	.gui-list-image {
		width: 160rpx;
		height: 160rpx;
	}
</style>